﻿<div id="ReviewsTabsWrapper">
    <i class="ping"></i>
    <section id="ReviewsGraphic">
        <div class="ReviewsGraphicWrapper">
            <div class="ReviewsGraphicBox">
                <div class="haopingdu">
                    <div id="ReviewsStat" data-dimension="60" data-text="@(Model.Product.TotalCommentCount == 0 ? 100 : (Model.Product.BestCommentCount + Model.Product.GoodCommentCount + Model.Product.NormalCommentCount) * 100 / Model.Product.TotalCommentCount)%" data-info="" data-width="3" data-fontsize="12" 
                         data-percent="@(Model.Product.TotalCommentCount == 0 ? 100 : (Model.Product.BestCommentCount + Model.Product.GoodCommentCount + Model.Product.NormalCommentCount) * 100 / Model.Product.TotalCommentCount)" data-fgcolor="#e56c69" data-bgcolor="#dde8ed"></div>
                    <p>好评度</p>
                </div>
                <div class="reviewspercentage">
                    <ul>
                        <li>
                            <label>满意<em>(@(Model.Product.TotalCommentCount == 0 ? 0 : (Model.Product.BestCommentCount + Model.Product.GoodCommentCount) * 100 / Model.Product.TotalCommentCount)%)</em></label>
                            <div class="percentagewrapper">
                                <div class="percentagebar" style="width: @(Model.Product.TotalCommentCount == 0 ? 0 : (Model.Product.BestCommentCount + Model.Product.GoodCommentCount) * 100 / Model.Product.TotalCommentCount)%"></div>
                            </div>
                        </li>
                        <li>
                            <label>一般<em>(@(Model.Product.TotalCommentCount == 0 ? 0 : Model.Product.NormalCommentCount * 100 / Model.Product.TotalCommentCount)%)</em></label>
                            <div class="percentagewrapper">
                                <div class="percentagebar" style="width: @(Model.Product.TotalCommentCount == 0 ? 0 : Model.Product.NormalCommentCount * 100 / Model.Product.TotalCommentCount)%"></div>
                            </div>
                        </li>
                        <li>
                            <label>不满意<em>(@(Model.Product.TotalCommentCount == 0 ? 0 : (Model.Product.BadCommentCount + Model.Product.WorstCommentCount) * 100 / Model.Product.TotalCommentCount)%)</em></label>
                            <div class="percentagewrapper">
                                <div class="percentagebar" style="width: @(Model.Product.TotalCommentCount == 0 ? 0 : (Model.Product.BadCommentCount + Model.Product.WorstCommentCount) * 100 / Model.Product.TotalCommentCount)%"></div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="writereviews">
                    购买过此商品,评论还可以换积分哦
                    <a href="/myaccount/MyComment">发表评论</a>
                </div>
            </div>
        </div>
    </section>
    <div id="ReviewsTabs">
        <ul id="ReviewsTabsHandler">
            <li class="selected"><a href="#ReviewsTabs0">全部评价(@Model.Product.TotalCommentCount)</a></li>
            <li><a href="#ReviewsTabs1" rel="CommentList?productId=@Model.Product.ProductId&type=5">很好(@Model.Product.BestCommentCount)</a></li>
            <li><a href="#ReviewsTabs2" rel="CommentList?productId=@Model.Product.ProductId&type=4">比较好(@Model.Product.GoodCommentCount)</a></li>
            <li><a href="#ReviewsTabs3" rel="CommentList?productId=@Model.Product.ProductId&type=3">一般(@Model.Product.NormalCommentCount)</a></li>
            <li><a href="#ReviewsTabs4" rel="CommentList?productId=@Model.Product.ProductId&type=2">比较差(@Model.Product.BadCommentCount)</a></li>
            <li><a href="#ReviewsTabs5" rel="CommentList?productId=@Model.Product.ProductId&type=1">非常差(@Model.Product.WorstCommentCount)</a></li>
        </ul>
        <div id="ReviewsTabs0" class="ReviewsTabs-Wrapper" style="display: block;">
            @Html.Action("CommentList", "Product", new { productId = Model.Product.ProductId })
        </div>
        <div id="ReviewsTabs1" class="ReviewsTabs-Wrapper" style="display: none;">
        </div>
        <div id="ReviewsTabs2" class="ReviewsTabs-Wrapper" style="display: none;">
        </div>
        <div id="ReviewsTabs3" class="ReviewsTabs-Wrapper" style="display: none;">
        </div>
        <div id="ReviewsTabs4" class="ReviewsTabs-Wrapper" style="display: none;">
        </div>
        <div id="ReviewsTabs5" class="ReviewsTabs-Wrapper" style="display: none;">
        </div>
    </div>
</div>
<script>
    $('#ReviewsTabs').aTabs({
        eventName: 'click',
        loadName: '<i class="fa fa-refresh fa-spin"></i> 加载中...'
    });
    $('#ReviewsStat').circliful();
</script>